<!--{if $_G['inajax']}-->
{template common/header}
<!--{/if}-->
<script src="source/plugin/cc_cansnow_eacpay/jquery.min.js" type="text/javascript"></script>
<div id="main_messaqge">
    <h3 class="flb">
        <em>$csetting['pluginname']</em>
        <span>
					<!--{if $_G['inajax']}--><a href="javascript:;" class="flbc" onclick="hideWindow('{$_GET['handlekey']}')" title="{lang close}">{lang close}</a><!--{/if}-->
				</span>
    </h3>
    <table width="100%">
        <tr>
            <td style="padding-top:0;">
                <p class="tbms mtm ">$csetting['notice']</p>
            </td>
        </tr>
    </table>
    <style>
        .flex_row {
            display: flex;
            flex-direction: row;
            margin: 10px 0;
        }
        
        .flex_row>b {
            width: 80px;
        }
        
        .flex_col {
            display: flex;
            flex-direction: column;
        }
        
        .flex_1 {
            flex: 1;
        }
        
        .eacdetaildata {
            display: none;
        }
        
        #qrcode>div {
            border: 3px dotted #666;
            border-radius: 5px;
            width: 157px;
            text-align: center;
        }
        
        #qrcode>div>div {
            line-height: 1;
            margin-bottom: 10px;
        }
        
        .eacpay_payment {
            border: 1px solid #ddd;
            display: inline-block;
            padding: 5px;
            vertical-align: baseline;
        }
        
        .eacpay_payment img {
            vertical-align: top;
        }
        
        .eacpay_payment span {
            padding: 0 5px;
            display: inline-block;
            height: 48px;
            line-height: 24px;
            font-weight: 700;
        }
        
        .eacpay_remark {
            padding: 0 0 0 40px;
        }
        
        .eacpay_remark p {}
        #loading{
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            margin: -100px -250px;
            background: #fff;
            width: 500px;
            text-align: center;
            height: 200px;
            box-shadow: #87858570 0px 0px 0px 8px;
        }

        @keyframes circle-dash{
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        #loading .circle{
            animation: circle-dash 2s linear infinite;margin: 20px;
        }
        #loading .progresstext{    line-height: 50px;    font-size: 16px;}
    </style>
    <form action="plugin.php?id=cc_cansnow_eacpay:recharge&action=buy" method="post" name="add" id="add" enctype="multipart/form-data">
        <div style="padding:10px;">
            <div class="flex_row">
                <div class="flex_col flex_1">
                    <div class="flex_row" style="align-items: center;">
                        <b>支付方式:</b>
                        <label class="flex_row" style="align-items: center;">
                            <input type="radio" name="paytype" value="eacpay" checked/>
                            <span class="eacpay_payment">
                                <img src="source/plugin/cc_cansnow_eacpay/logo.png" alt="EACPAY區塊鏈支付" width="48"/>
                                <span>EACPAY<br/>區塊鏈支付</span>
                            </span>
                        </label>
                    </div>
                    <div class="flex_row">
                        <b>充值</b>
                        <div>
                            <input type="number" name="money" id="exchangeamount" value="0" onblur="exchangecalcredit()" size="30" class="px" min="1" max="1000" />
                            <b>{$_G['setting']['extcredits'][$csetting['moneytype']]['title']}</b>
                            <button type="button" onclick="document.getElementById('exchangeamount').value=this.innerText;exchangecalcredit();">1</button>
                            <button type="button" onclick="document.getElementById('exchangeamount').value=this.innerText;exchangecalcredit();">10</button>
                            <button type="button" onclick="document.getElementById('exchangeamount').value=this.innerText;exchangecalcredit();">100</button>
                            <button type="button" onclick="document.getElementById('exchangeamount').value=this.innerText;exchangecalcredit();">1000</button>
                        </div>
                    </div>
                    <div class="flex_row eacdetaildata">
                        <b>EAC即時價:</b>
                        <label id="exchangeData">{$csetting['bizhong']}0000000</label>
                    </div>
                    <div class="flex_row eacdetaildata">
                        <b>EAC數量:</b>
                        <label id="eacamount"></label>
                    </div>
                    <div class="flex_row eacdetaildata" id="rmbamount">
                        <b>約合人民幣:</b>
                        <label></label>
                    </div>
                    <div class="flex_row" style="display: none;">
                        <b>充值備註:</b>
                        <input type="text" name="remark" id="remark" value="0" readonly="readonly" disabled="on" size="30" class="px" style="border: 0;background: transparent;" />
                    </div>
                    <div class="flex_row" style="display: none;">
                        <b>可獲得{$_G['setting']['extcredits'][$csetting['moneytype']]['title']}:</b>
                        <input type="text" name="jfnum" id="exchangedesamount" value="0" readonly="readonly" disabled="on" size="30" class="px" style="border: 0;background: transparent;" />
                    </div>
                    <p class="o pns{if empty($_G['inajax'])} mtw{/if}">
                        <button type="button" onclick="submitform();" class="pn vm" name="addsubmit" value="yes"><strong>{lang submit}</strong></button>
                        <!-- <span id="querymsg">系統查詢中...確認個數:x個</span> -->
                    </p>
                </div>
            </div>
        </div>
        <input type="hidden" name="formhash" value="{FORMHASH}" />
        <!--{if !empty($_G['inajax'])}--><input type="hidden" name="handlekey" value="$_GET['handlekey']" />
        <!--{/if}-->
    </form>
    <div>
        <table summary="轉賬與兌換" cellspacing="0" cellpadding="0" class="dt mtm">
            <caption>
                <h2 class="mbm xs2">充值記錄
                    <!-- <a href="plugin.php?id=cc_cansnow_eacpay:recharge&action=log" class="xi2 xs1 xw0 y">查看更多?</a> -->
                </h2>
            </caption>
            <tbody>
                <tr class="header">
                    <th>訂單號</th>
                    <th>創建時間</th>
                    <th>金額</th>
                    <th>狀態</th>
                </tr>
                <!--{loop $orderlist $key $value}-->
                <tr>
                    <td>
                        <!--{$value['order_id']}-->
                    </td>
                    <td>
                        <!--{date($value['create_time'],'Y-m-d H:i:s')}-->
                    </td>
                    <td>
                        <!--{$value['amount']}-->
                    </td>
                    <td class="status_<!--{$value['status']}-->" data-orderid="<!--{$value['order_id']}-->" data-eac="<!--{$value['eac']}-->">
                        <!--{$statusArr[$value['status']]}-->
                    </td>
                </tr>
                <!--{/loop}-->
            </tbody>
        </table>
    </div>
    
    
	<div id="eacpaylayer" style="position: absolute;position: fixed;top: 50%;left: 50%;width: 630px;height: 360px;background: #fff;margin: -180px -300px;box-shadow: #87858570 0px 0px 0px 8px;z-index: 999;padding:10px;display:none;" class="flex_row">
		<div class="flex_1">
			<div id="qrcode" style="text-align: center;">
				<div style="text-align: center;margin: 30px auto;border-color: #f00;">
					<span style="display: block;color: red;font-size: 14px;font-weight: 700;">用EACPAY掃碼支付</span>
					<img src="#" width="150" class="img">
				</div>
				<div id="eacpayresult" style="border: 0;width: 80%;margin:30px auto;">
					<div class="resultmsg" style="text-align: center;font-size: 16px;margin-bottom: 15px;">等待用戶支付...</div>
					<div class="loading" style="width: 100%;height: 8px;background: #e5e3e3;border-radius: 2px;">
						<div class="bar" style="width: 0%;background: #2975c4;height: 100%;transition: all 0.2s;border-radius: 2px;"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="flex_col" style="width: 200px;line-height: 25px;font-size: 14px;">
			<p>人民幣現金 1元 = 1RMB</p>
			<p>EACPAY手機端區塊鏈錢包下載:</p>
			<p>1、google play</p>
			<p>2、<a href="http://www.eacpay.com">eacpay.com官網下載</a></p>
			<p>3、手機瀏覽器掃一掃，下載EACPAY</p>
			<img src="source/plugin/cc_cansnow_eacpay/app.jpg" width="160" height="190" />
		</div>
	</div>
    <script type="text/javascript">
        jQuery.noConflict();
        var order = {};
        document.getElementById('remark').value = "recharge{$_G['uid']}" + (new Date().getTime()) + Math.floor(Math.random() * 100000 + 1);
        String.prototype.toInt = function() {
            var s = parseInt(this);
            return isNaN(s) ? 0 : s;
        }

        function exchangecalcredit() {
            jQuery('#exchangeamount').val(jQuery('#exchangeamount').val().toInt());
            if (jQuery('#exchangeamount').val() != 0) {
                jQuery('#exchangedesamount').val(Math.floor($csetting['moneybl'] * jQuery('#exchangeamount').val()));
                jQuery.getJSON('plugin.php?id=cc_cansnow_eacpay:recharge&action=geteac&amount=' + jQuery('#exchangeamount').val(), function(d) {
                    jQuery('#exchangeData').text(d.exchange + "{$bizhong}");
                    jQuery('#eacamount').text(d.eacamount);
                    jQuery('#remark').val(d.orderid);
                    jQuery('#rmbamount b').text("約合{$bizhongTxt}:");
                    jQuery('#rmbamount label').text(d.rmb);
                    jQuery('.eacdetaildata').css('display', 'flex');
                    jQuery('button[name=addsubmit]').css('display', 'block');
                });
            } else {
                jQuery('#exchangedesamount').val('0');
            }
        }

        exchangecalcredit();
        var timeId = null;

        function check() {
            jQuery.getJSON('plugin.php?id=cc_cansnow_eacpay:recharge&action=check&orderid=' + order.orderid, function(d) {
                if (d.code == "1") {
                    clearInterval(timeId);
                    jQuery('#eacpayresult .loading .bar').css('width','100%');
                    jQuery('#eacpayresult .resultmsg').html("充值成功");
                    setTimeout(function() {
                        location.reload();
                    }, 2000);
                }else if (d.code == "2") {
                    jQuery('#eacpayresult .loading .bar').css('width',(parseInt(d.confirmations)/parseInt(d.receiptConfirmation))*100+'%');
                    jQuery('#eacpayresult .resultmsg').html('正在確認訂單，請稍等...');
                }else if (d.code == "3") {
                    jQuery('#eacpayresult .loading .bar').css('width','100%');
                    jQuery('#eacpayresult .resultmsg').html(d.msg);
                }else if (d.code == "4") {
                    jQuery('#eacpayresult .loading .bar').css('width','0%');
                    jQuery('#eacpayresult .resultmsg').html(d.msg);
                } else {
                    clearInterval(timeId);
                    jQuery('#eacpayresult .loading .bar').css('width','100%');
                    jQuery('#eacpayresult .resultmsg').html(d.msg);
                }
            });
        }

        function submitform() {
            var amount = parseInt(jQuery('#exchangeamount').val());
            if(amount <= 0){
                alert('充值金額必大於0');
            }
            jQuery.getJSON('plugin.php?id=cc_cansnow_eacpay:recharge&action=geteac&submit=1&amount=' + amount, function(d) {
                if(d.msg){
                    alert(d.msg);
                    return ;
                }
                order = d;
                jQuery('#exchangeData').text(d.exchange + "{$bizhong}");
                jQuery('#eacamount').text(d.eacamount);
                jQuery('#remark').val(d.orderid);
                jQuery('#rmbamount b').text("約合{$bizhongTxt}:");
                jQuery('#rmbamount label').text(d.rmb);
                jQuery('.eacdetaildata').css('display', 'flex');
                jQuery('button[name=addsubmit]').css('display', 'none');
                jQuery('#qrcode .img').attr('src',d.qrcode);
                jQuery('#eacpaylayer').show();
                timeId = setInterval(check, 3000);
            });
        }
        jQuery('.status_wait').on('click',function(){
            if(!timeId){
                order.orderid = jQuery(this).data('orderid');
                order.eac = jQuery(this).data('eac');
                jQuery('#qrcode .img').attr('src','plugin.php?id=cc_cansnow_eacpay:recharge&action=qrcode&eac='+order.eac+'&orderid='+order.orderid);
                jQuery('#eacpaylayer').show();
                timeId = setInterval(check, 3000);
            }
        })
    </script>
</div>
<!--{if $_G['inajax']}-->
{template common/footer}
<!--{/if}-->